<nz-card>
  <div class="seach-wrap">
    <div class="seach-rt">
      <nz-space [nzSize]="8">
        <button *nzSpaceItem nz-button nzType="primary" nzDanger (click)="openModel(0)">封禁账号</button>
        <button *nzSpaceItem nz-button nzType="primary" (click)="openModel(1)">设置身份</button>
      </nz-space>
    </div>
  </div>
  
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="110px">ID</th>
              <th nzAlign="center" nzWidth="110px">用户ID</th>
              <th nzAlign="center">昵称</th>
              <th nzAlign="center">联系方式</th>
              <th nzAlign="center">用户真实身份</th>
              <th nzAlign="center">圈子状态</th>
              <th nzAlign="center">身份标识</th>
              <th nzAlign="center" nzWidth="320px">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <td nzAlign="center">{{ data.id }}</td>
              <td nzAlign="center">{{ data.userId }}</td>
              <td nzAlign="center">{{ data.nickname || '-' }}</td>
              <td nzAlign="center">{{ data.phone || '-' }}</td>
              <td nzAlign="center">
                {{ data.userType | userIdentityStatus }}
              </td>
              <td nzAlign="center">
                <span [ngStyle]="{color: data.state | circleStateStatus: 'color'}">
                  {{ data.state | circleStateStatus: 'text' }}
                </span>
              </td>
              <td nzAlign="center">
                {{ data.identity | identityStatus }}
              </td>
              <td nzAlign="center">
                <a
                  *ngIf="data.state == 2"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认取消禁言吗?"
                  [nzIcon]="iconTpl1"
                  (nzOnConfirm)="cancelSteup(data, 0)">取消禁言</a>
                <ng-template #iconTpl1>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
                <a
                  *ngIf="data.state == 1"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认取消禁用吗?"
                  [nzIcon]="iconTpl"
                  (nzOnConfirm)="cancelSteup(data, 0)">取消禁用</a>
                <ng-template #iconTpl>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
                <a
                  *ngIf="data.identity == 2"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认取消管理员身份吗?"
                  [nzIcon]="iconTpl2"
                  (nzOnConfirm)="cancelSteup(data, 1)">取消管理员</a>
                <ng-template #iconTpl2>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
                <a
                  *ngIf="data.identity == 1"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认取消内部账号身份吗?"
                  [nzIcon]="iconTpl3"
                  (nzOnConfirm)="cancelSteup(data, 1)">取消内部账号</a>
                <ng-template #iconTpl3>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  </main>
</nz-card>

<!-- model START -->
<nz-modal
    nzClassName="custom-model-wrap"
    [(nzVisible)]="isModelVisible"
    [nzTitle]="modelType == 0 ? '封禁账号' : '设置身份'"
    [nzContent]="modalContent"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()">

    <ng-template #modalContent>
      <div class="custom-model-body">
        <form nz-form [formGroup]="validateForm">
          <!-- ID -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              class="label-sp">
              ID
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              [nzErrorTip]="inputIdtip">
              <input
                nz-input
                formControlName="userId"
                [placeholder]="inputIdtip"
              />
            </nz-form-control>
          </nz-form-item>
  
          <!-- 封禁 -->
          <nz-form-item *ngIf="modelType == 0">
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              class="label-sp">
              封禁
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              nzErrorTip="请选择封禁状态">
              <nz-radio-group formControlName="state">
                <label nz-radio nzValue="2">禁言</label>
                <!-- <label nz-radio nzValue="1">禁用</label> -->
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
  
          <!-- 身份 -->
          <nz-form-item *ngIf="modelType == 1">
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              class="label-sp">
              身份
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              nzErrorTip="请选择要设置的身份">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择要设置的身份" formControlName="identity">
                <nz-option nzLabel="内部账号" nzValue="1"></nz-option>
                <nz-option nzLabel="管理员" nzValue="2"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      
      <div class="custom-model-foot">
        <div class="custom-foot-cont">
          <button nz-button nzType="default" (click)="handleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">确定</button>
        </div>
      </div>
    </ng-template>
</nz-modal>
<!-- model END -->